<template>
	<view class="pictureads">
		<!-- 图片广告 -->

		<!-- 胶囊图 -->
		<!-- 一行一个 -->
		<view v-if="datas.imageList[0] && datas.swiperType == 0" class="type0" :style="{
        'padding-left': datas.pageMargin + 'px',
        'padding-right': datas.pageMargin + 'px',
      }">

			<view v-for="(item, index) in datas.imageList" :key="index" class="imgLis2" @tap="click(index)"
				:style="{ 'margin-bottom': datas.imageMargin + 'px' }">
				<!-- 图片 -->
				<!--  :style="{ 'border-radius': datas.borderRadius + 'px' }" -->
				<!-- <image :src="item.src" mode="widthFix"></image> -->
				<image :src="item.src" style="border-radius: 25rpx;" mode="widthFix" />
				<!-- 图片标题 -->
				<text class="title" v-show="item.text ? true : false">{{ item.text }}</text>
			</view>
		</view>

		<!-- 轮播组件 -->
		<!-- <view class="swiper-container" v-if="
        (imageList[0] && swiperType === 1) ||
        swiperType === 2 ||
        swiperType === 3
      ">
			<view :class="
          swiperType === 3 && imageList[0]
            ? 'type3 type1 swiper-wrapper type3H'
            : 'swiper-wrapper type1'
        ">
				<view class="swiper-slide" v-for="(item, index) in imageList" :key="index">

					<image :src="item.src" alt="" :style="{ 'border-radius': datas.borderRadius + 'px' }" />

					<text class="title" v-show="item.text ? true : false">{{ item.text }}</text>
				</view>
			</view>


			<view class="swiper-pagination" style="color: #007aff"></view>
		</view> -->

		<!-- 轮播图 -->
		<view class="swiper-container" v-else>

			<gui-swiper class="lunbo" :swiperItems="swiperlist" :width="swiper_width" :height="swiper_height" :opacity="0"
				imgMode="scaleToFill" @taped="swiper_click" :padding="swiper_padding" :spacing="swiper_spacing"
				:borderRadius='borderRadius' :indicatorActiveWidth="20"></gui-swiper>

		</view>

	</view>
</template>

<script>
	// import Swiper from 'swiper'
	// import 'swiper/css/swiper.min.css'

	export default {
		name: 'pictureads',
		props: {
			datas: {
				type: Object,
				default: () => {
					return {
						text: '图片广告',
						swiperType: 1, // 选择模板
						borderRadius: 0, // 图片倒角
						pageMargin: 0, // 页面边距
						imageMargin: 0, // 图片边距
						pagingType: 0, // 分页类型: 0/"bullets"/"fraction"/"progressbar"
						rowindividual: 2, // 一行个数
						imageList: [], // 添加图片
					}
				}
			},
		},
		data() {
			return {
				swiper_padding: 15,
				swiper_spacing: 0,
				swiperItems: [],
				borderRadius: '20rpx', // 图片倒角
				swiperType: 1,
				swiper_width: 688,
				// swiper_width: 716,
				swiper_height: 320,
				user: uni.getStorageSync("member"),
			}
		},
		computed: {
			swiperlist() {
				let arr = [];
				this.datas.imageList.map((item, index) => {

					arr.push({
						img: item.src,
						title: item.text,
						http: item.http,
						linktype: "10",
						opentype: 'click',
					})
				})
				// console.log('数据：', arr);
				return arr;
			}
			/* 类型切换 */
			// swiperType() {
			//   console.log(this.datas.swiperType, '----------------轮播类型')
			//   this.addSwiper()
			//   return this.datas.swiperType
			// },
			// /* 图片删除或者增加 */
			// imageList() {
			//   this.addSwiper()
			//   console.log(this.datas.imageList.length, '-------轮播数量')
			//   return this.datas.imageList
			// },
			// /* 分页器类型切换 */
			// pagingType() {
			//   this.addSwiper()
			//   return this.datas.pagingType
			// },
			// /* 一行个数 */
			// rowinviewidual() {
			//   this.addSwiper()
			//   if (this.datas.swiperType === 1) {
			//     return 1
			//   } else {
			//     return this.datas.rowinviewidual
			//   }
			// },
			// /* 图片间距 */
			// imageMargin() {
			//   this.addSwiper()
			//   if (this.datas.swiperType === 1) {
			//     return 0
			//   } else {
			//     return this.datas.imageMargin
			//   }
			// },
		},
		watch: {
			pagingType() {},
			rowinviewidual() {},
			imageMargin() {},
			datas: {
				handler(newVal, oldVal) {

					this.init();
				},
				deep: true,
			}
		},
		created() {

		},

		methods: {
			init() {

				this.swiperType = this.datas.swiperType;
				this.imageList = this.datas.imageList;
				if (this.datas.swiperType == 0 && this.datas.imageList.length > 0) {
					//一行一个模式
					this.imageList = [];
					this.datas.imageList.map((item, index) => {
						this.imageList.push(item);
					})
				} else {
					//轮播

					this.datas.imageList.map((item, index) => {

						this.swiperItems.push({
							img: item.src,
							title: item.text,
							http: item.http,
							linktype: "10",
							opentype: 'click',
						})
					})
				}
			},
			click(index) {
				// this.$emit("nav", {
				// 	"type": "pictureads",
				// 	"data": this.datas.imageList[index]
				// });
				console.log('index: ', this.swiperlist[index]);
				let item = {
					http: this.swiperlist[index].http,
					src: this.swiperlist[index].img,
					linktype: this.swiperlist[index].linktype,
					text: this.swiperlist[index].title,
				}
				// if (this.swiperlist[index].http.externalLink.indexOf("lgtt.boyaltd") > 0) {
				// 	uni.request({
				// 		url: this.swiperlist[index].http.externalLink,
				// 		method: "POST",
				// 		data: {
				// 			mobile: this.user.phone,
				// 			user_name: this.user.name,
				// 		},
				// 		success(res) {
				// 			console.log('链接: ', res.data.data.data.JumpLink);
				// 			let url = res.data.data.data.JumpLink
				// 			item.http = url
				// 			console.log('我是item: ', item);
				// 			self.$emit("nav", {
				// 				"type": "pictureads",
				// 				"data": item
				// 			});
				// 			// window.location.href = url
				// 		}
				// 	})
				// } else {
				this.$emit("nav", {
					"type": "pictureads",
					"data": item
				});
				// }
			},
			swiper_click(n) {
				console.log('n: ', this.swiperlist[n]);
				let item = {
					http: this.swiperlist[n].http,
					src: this.swiperlist[n].img,
					linktype: this.swiperlist[n].linktype,
					text: this.swiperlist[n].title,
				}
				this.$emit("nav", {
					"type": "pictureads",
					"data": item
				});
			},
			/* 创建轮播对象 */
			addSwiper() {
				this.$nextTick(() => {
					if (this.datas.swiperType !== 0 && this.datas.imageList[0]) {
						if (this.mySwiper instanceof Array) {
							this.mySwiper.forEach((element) => {
								element.destroy()
							})
						} else if (this.mySwiper instanceof Object) {
							// 每次重新创建swiper前都要销毁之前存在的轮播   不然轮播会重复
							this.mySwiper.destroy()
						}

						let params = {
							loop: true,
							autoplay: true,
							pagination: {
								el: '.swiper-pagination',
								type: this.pagingType,
							},
						}

						if (this.datas.swiperType === 1 || this.datas.swiperType === 2) {
							params.slidesPerView = this.rowinviewidual
							params.spaceBetween = this.imageMargin
						} else if (this.datas.swiperType === 3) {
							params.slidesPerView = 1.3
							params.centeredSlides = true
						}

						//   this.mySwiper = new Swiper('.swiper-container', params)
						// } else {
						//   if (this.mySwiper instanceof Array) {
						//     this.mySwiper.forEach((element) => {
						//       element.destroy()
						//     })
						//   }
						//   // 每次重新创建swiper前都要销毁之前存在的轮播   不然轮播会重复
						//   if (this.mySwiper instanceof Object) {
						//     this.mySwiper.destroy()
						//   }
					}
				})
			},
		},
	}
</script>

<style scoped lang="less">
	.pictureads {
		position: relative;

		/* 无图片 */
		.upload {
			background: #979797;
			width: 100%;
			height: 250px;
			display: flex;
			justify-content: center;
			align-items: center;

			i {
				font-size: 120px;
			}
		}

		/* 类型0 */
		.type0 {
			box-sizing: border-box;

			.imgLis2 {
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100;

				image {
					width: 98%;
				}
			}

			/* 图片列表 */
			.imgLis {
				width: 100v;
				position: relative;
				overflow: hidden;

				&:last-child {
					margin: 0 !important;
				}

				/* 图片 */
				image {
					width: 100%;
					height: 100%;
					display: block;
				}

				.title {
					height: 36px;
					width: 100%;
					background-color: rgba(51, 51, 51, 0.8);
					text-align: center;
					line-height: 36px;
					color: #fff;
					position: absolute;
					bottom: 0;
					left: 0;
				}
			}
		}

		/* 类型1 */
		.type1 {
			width: 100%;
			position: relative;

			.swiper-slide {
				width: 100%;
				height: 250px;
			}

			image {
				width: 100%;
				height: 100%;
				display: block;
			}

			.title {
				height: 36px;
				width: 100%;
				background-color: rgba(51, 51, 51, 0.8);
				text-align: center;
				line-height: 36px;
				color: #fff;
				position: absolute;
				bottom: 0;
				left: 0;
				text-align: left;
				box-sizing: border-box;
				padding: 0 5px;
			}
		}

		.type3 {
			width: 100%;
			height: 250px;
			align-items: center;

			.swiper-slide {
				height: 210px !important;
				text-align: center;
				font-size: 18px;
				background: #fff;
				// box-shadow: rgba(173, 173, 173, 0.8) 0px 7px 24px 0px;
				// border-radius: 12px;
				overflow: hidden;

				/* Center slide text vertically */
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				-webkit-box-pack: center;
				-ms-flex-pack: center;
				-webkit-justify-content: center;
				justify-content: center;
				-webkit-box-align: center;
				-ms-flex-align: center;
				-webkit-align-items: center;
				align-items: center;
				transition: 300ms;
				transform: scale(0.8);

				image {
					width: 100%;
					height: 100%;
				}
			}

			.swiper-slide-active,
			.swiper-slide-duplicate-active {
				transform: scale(1);
			}

			.swiper-pagination {
				bottom: 0 !important;
			}

			.title {
				height: 36px;
				width: 100%;
				background-color: rgba(51, 51, 51, 0.8);
				text-align: center;
				line-height: 36px;
				color: #fff;
				position: absolute;
				bottom: 0;
				left: 0;
				text-align: left;
				box-sizing: border-box;
				padding: 0 5px;
			}
		}

		.type3H {
			height: 250px;
		}

		// .lunbo {
		// 	box-shadow: 10rpx 10rpx 10rpx #f0f0f0;
		// }

		.swiper-container-horizontal>.swiper-pagination-progressbar {
			height: 2px;
		}
	}
</style>